<%@ page import="com.party.core.model.system.TargetType" %>
<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="../../include/tag.jsp" %>
<!DOCTYPE html>
<html lang="zh">
<head>
    <title></title>
    <%@include file="../../include/commonFile.jsp" %>
    <link rel="stylesheet" href="${ctx}/css/common/list.css">
    <link rel="stylesheet" href="${ctx}/css/ui/activity/publish_form.css">
    <style>
        .index-outside > section .section-main {
            min-width: 0px !important;
            padding: 15px;
        }

        .index-outside > section {
            padding-bottom: 0px !important;
        }

        .cover-content .cover-img {
            width: 100px;
            height: 100px;
        }
    </style>
</head>
<body>
<!--头部-->
<div class="index-outside">
    <!--内容-->
    <section class="no-fix">
        <div class="section-main">
            <!-- 正文请写在这里 -->
            <div class="add-form-content">
                <form id="myForm" class="layui-form mt20" method="post" action="${ctx}/mall/category/save.do">
                    <input type="hidden" name="id" value="${mallCategory.id}"/>

                    <c:if test="${type == 1}">
                        <div class="layui-form-item">
                            <div class="layui-form-item">
                                <label class="layui-form-label">一级分类名称<span class="f-verify-red">*</span></label>
                                <div class="layui-input-block">
                                    <input type="text" name="name" lay-verify="name" autocomplete="off"
                                           class="layui-input" value="${mallCategory.name}" maxlength="5"
                                           style="width: 200px; float: left; margin-right: 10px;"
                                    >
                                    <div class="layui-form-mid layui-word-aux">最多5字符</div>
                                </div>
                            </div>
                        </div>
                    </c:if>
                    <c:if test="${type == 2}">
                        <div class="layui-form-item ">
                            <div class="layui-form-item" style="width: 200px">
                                <label class="layui-form-label">上级分类<span class="f-verify-red">*</span></label>
                                <div class="layui-input-block" style="width: 200px">
                                    <input type="hidden" name="parentId" value="${parentId}" />
                                    <select disabled>
                                        <option value="">请选择</option>
                                        <c:forEach var="category" items="${list}">
                                            <option value="${category.id}" ${parentId == category.id ? 'selected' : ''}>${category.name}</option>
                                        </c:forEach>
                                    </select>
                                </div>
                            </div>

                            <div class="layui-form-item">
                                <label class="layui-form-label">二级分类名称<span class="f-verify-red">*</span></label>
                                <div class="layui-input-block">
                                    <input type="text" name="name" lay-verify="name" lay-filter="name"
                                           autocomplete="off" class="layui-input" value="${mallCategory.name}" maxlength="5"
                                           style="width: 200px; float: left; margin-right: 10px;"
                                    >
                                    <div class="layui-form-mid layui-word-aux">最多5字符</div>
                                </div>
                            </div>

                            <div class="layui-form-item">
                                <label class="layui-form-label">二级分类图片<span class="f-verify-red">*</span></label>
                                <div class="cover-content">
                                    <input type="hidden" name="pic" id="logo" lay-verify="logo" lay-filter="logo" value="${mallCategory.pic}"/>
                                    <c:if test="${mallCategory == null || empty mallCategory.pic}">
                                    <span id="cover-img" class="cover-img" style="background-image:url(${ctx}/image/posterImg.png)"></span>
                                    </c:if>
                                    <c:if test="${mallCategory != null && not empty mallCategory.pic}">
                                    <span id="cover-img" class="cover-img" style="background-image:url('${mallCategory.pic}')"></span>
                                    </c:if>
                                    <a class="layui-btn layui-btn-danger" id="sel_pic_img">上传图片</a>
                                </div>
                            </div>
                        </div>
                    </c:if>
                </form>
            </div>
        </div>
    </section>
</div>
<script>
    $(function () {
        layui.use(['form', 'laydate'], function () {

        });
    });

    $('#sel_pic_img').click(function () {
        typeof openDialog === 'function' && openDialog();
        txz.openSelImg({
            min: 1,
            max: 1,
            info: '建议尺寸：800x450',
            type: '<%=TargetType.MALL.getCode()%>',
            cb: function (imgs) {
                $('#cover-img').css('background-image', 'url(' + imgs[0].path + ')');
                $('#logo').val(imgs[0].path);
                typeof closeDialog === 'function' && closeDialog();
            },
            closeCb: function () {
                typeof closeDialog === 'function' && closeDialog();
            }
        })
    });

    function ajaxSubmit(data, url, cb) {
        $.ajax({
            type: 'POST',
            async: false, // 使用同步的方法
            data: data,
            dataType: 'json',
            success: function (result) {
                typeof cb === 'function' && cb(result);
            },
            url: url
        });
    }

    function verify() {
        var flag = true;
        var name = $("[name=name]").val();
        if (!util.isValid(name)) {
            util.layerMsgError("分类名称不能为空")
            return false;
        } else {
            function cb(res) {
                flag = res.success;
                if (!res.success) {
                    util.layerMsgError(res.description)
                    return false;
                }
            }

            ajaxSubmit({
                name: name,
                id: '${mallCategory.id}',
                parentId : '${mallCategory.parentId}'
            }, '${ctx}/mall/category/verifyName.do', cb);
        }
        if ('${type == 2}' == 'true') {
            var pic = $("[name=pic]").val();
            if (!util.isValid(pic)) {
                util.layerMsgError("分类图片不能为空")
                return false;
            }
        }
        return flag;
    }

    function doSubmit() {
        var flag = false;
        if (verify()) {
            ajaxSubmit($('#myForm').serialize(), $("#myForm").attr('action'), function (res) {
                flag = res.success;
                if (res.success) {
                    util.layerMsgSuccess("提交成功")
                } else {
                    util.layerMsgError(res.description)
                }
            });
        }
        return flag;
    }

    function openDialog() {
        $(parent.$.find(".layui-layer-iframe")[0]).css("width", "900px");
        $(parent.$.find(".layui-layer-iframe")[0]).css("height", "730px");
        $(parent.$.find(".layui-layer-iframe")[0]).find("iframe").css("height", "630px");
    }

    function closeDialog() {
        $(parent.$.find(".layui-layer-iframe")[0]).css("width", "800px");
        $(parent.$.find(".layui-layer-iframe")[0]).css("height", "570px");
        $(parent.$.find(".layui-layer-iframe")[0]).find("iframe").css("height", "470px");
    }
</script>
</body>
</html>